import React from 'react';
let stream;
export default class Video extends React.Component{

    openCamera = async(e)=>{
        try{
            stream = await navigator.mediaDevices.getUserMedia({audio:false,video:true});
            let tracks = stream.getVideoTracks();
            console.log(tracks);
            console.log(tracks[0].label,tracks[0].id);
            this.refs["video"].srcObject = stream

        }catch(e){
            console.log(e)
        }
    }
    closeCamera = (e)=>{
        let tracks = stream.getVideoTracks()
        stream.removeTrack(tracks[0])
        console.log(tracks);
    }

    openSrceen=async(e)=>{
        try{
            stream = await navigator.mediaDevices.getDisplayMedia({video:true});
            let tracks = stream.getVideoTracks();
            console.log(tracks);
            console.log(tracks[0].label,tracks[0].id);
            this.refs["video"].srcObject = stream

        }catch(e){
            console.log(e)
        }
    }
    shoptScreen=()=>{
        this.refs["canvas"].getContext("2d").drawImage(this.refs["video"],0,0,400,400);
    }

    render(){

        return(
            <div>
                <div>
                    <button onClick={this.openCamera} >打开摄像机</button>
                    <button onClick={this.closeCamera}>关闭摄像机</button>
                    <button onClick={this.openSrceen}>共享</button>
                    <button onClick={this.shoptScreen}>截图</button>
                </div>
               
                <div>
                    <video width="400" height="400" ref="video" autoPlay playsInline></video>
                    <canvas width="400" height="400"  ref="canvas"></canvas>
                </div>
            </div>
            
        );
    }
}